<template>
	<div class="card">
		<el-card>
			<template #header>
				<div class="card-header">
					<span>{{ title ?? 'Card name' }}</span>
				</div>
			</template>

			<div class="body" >
				{{
					containt ??
					'举止大方害死的发生刷卡机电话卡速度拿手机搭嘎u发哈新中国党员大会付过款的电视剧分页死哦阿胶大小姐加工费UI'
				}}
			</div>

			<template #footer>
				<div class="time">日期：{{ new Date(time).toLocaleDateString() ?? '2023-10-12' }}</div>
			</template>
		</el-card>

	
	</div>
</template>

<script setup>
const props = defineProps(['time', 'containt', 'title'])

const showDetials = defineModel('showDetials')



</script>

<style scoped lang="scss">
$gradient-direction: -45deg;
$color1: rgb(0, 247, 167);
$color2: rgb(5, 241, 245);
$background: linear-gradient($gradient-direction, $color1, $color2);

.card-header {
	text-align: center;
}

.contant {
	color: #e6a23c;
}

.el-dialog {
	background: #d1edc4;
}
.body {
	text-indent: 2rem;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	text-overflow: ellipsis;
}

.el-card {
	width: 200px;
	background: $background;
	border-radius: 120px 10px;
	transform: rotateZ(354deg);
	color: #fff;
	&:deep(.el-card__header) {
		border: none;
	}

	&:deep(.el-card__footer) {
		border: none;
	}
}
</style>
